<%@page import="java.util.Iterator"%>
<%@page import="java.util.Map"%>
<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@page import="com.milk_shop.model.Food"%>
<%@page import="java.util.List"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath %>"/>
  <%List<Food> foods = (List<Food>)ActionContext.getContext().get("foods"); %>
	<%Map precents =  (Map)ActionContext.getContext().get("salesPrecent");%>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单品销量榜</title>
  <script src="js/vue.js"></script>
  <script src="js/httpVueLoader.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/back-button.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.common.min.js"></script>
  <style>
     #main {
      width: 900px;
      height: 320px;
      margin: 0 200px 0 50px;
      float: left;
    }

    .sale {
      width: 70%;
      margin: 0 auto;
    }

    .saleTop {
      width: 100%;
    }

    .side {
      float: left;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="side">
      <sider-component></sider-component>
    </div>
    <div id="main"></div>
    <div class="sale">
      <div id="saleTop">
        <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
        <div class="manage-btn">
          <el-button type="primary" icon="el-icon-top" circle @click="get(0)"></el-button>
          <el-button type="warning" icon="el-icon-bottom" circle @click="get(1)"></el-button>
          <el-button type="danger" @click="get(2)"><span>查看推荐套餐</span></el-button>
        </div>
        <el-table :data="currentPageData" style="width: 100%" :row-class-name="tableRowClassName" @cell-dblclick="tableEdit">
          <el-table-column prop="name" label="食品名称" width="100">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column prop="salesVolume" label="销量" width="100">
            <template slot-scope="scope">{{ scope.row.salesVolume }}</template>
          </el-table-column>
          <el-table-column prop="account" label="折扣" width=100>
            <template slot-scope="scope">
              <el-input v-model="scope.row.account"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="recommReason" label="推荐理由" width="400">
            <template slot-scope="scope">
              <el-input v-model="scope.row.recommReason"></el-input>
            </template>
          </el-table-column>
          </el-table-column>
          <el-table-column label="推荐" align="center" width="100">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRecommend">推荐</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="success" plain @click="update(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
			<el-pagination background layout="prev, pager, next" 
			:page-size="4" 
			:total=" <%= foods.size()%> "
            @current-change="toPage" 
            @prev-click="prevPage" 
            @next-click="nextPage">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
  <script>
    Vue.use(httpVueLoader);
    new Vue({
      el: "#app",
      components: {
        'sider-component': 'url:component/SiderNav.vue',
      },
      data: {
        tableData: [
        	  <%for(int i = 0;i < foods.size();i++){
        		  out.print("{");
        		  out.print("id:\""+foods.get(i).getId()+"\",");
        		  out.print("name:\""+foods.get(i).getName()+"\",");
        		  out.print("salesVolume:\""+foods.get(i).getSales()+"\",");
        		  out.print("account:\""+foods.get(i).getDisCount()+"\",");
        		  out.print("recommReason:\""+foods.get(i).getReason()+"\",");
        		  out.print("isRecommend:"+foods.get(i).isRecommend());
        		  out.print("},");
        	  } %>
        ],
        foodsSize: <%= foods.size()%>, //所有数据
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 4, // 每页显示数量
        currentPageData: [] //当前页显示内容
      },
      created: function(){
          this.setCurrentPageData();
      },
      methods: {
        get:function(order){
        	window.location.href="/MilkShop/top/get?order="+order;
        },
        update:function(row){
        	if (!((row.account >= 0.5) && (row.account <= 1))) {
        		this.$message({
        			type: 'error',
        			message: '折扣范围(0.5-1.0)：错误'
        		});
        		return;
        	}
    		this.$message({
    			type: 'submit',
    			message: '修改成功'
    		});
        	window.location.href="/MilkShop/top/update?id="+row.id
    		  +"&disCount="+row.account
    		  +"&reason="+row.recommReason
    		  +"&recommend="+row.isRecommend
    		  +"&order="+0;
        },
        // 设置当前页面数据
        setCurrentPageData:function() {
            // 计算一共有几页
             this.totalPage = Math.ceil(this.foodsSize / this.pageSize);
            // 计算得0时设置为1
             this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
            console.log(this.totalPage);
             let begin = (this.currentPage - 1) * this.pageSize;
             let end = this.currentPage * this.pageSize;
             console.log(begin);
             console.log(end);
             this.currentPageData = this.tableData.slice(
                 begin,
                 end
             );
         },
         //上一页
         prevPage:function(){
             console.log(this.currentPage);
             if (this.currentPage == 1) return;
              this.currentPage--;
              this.setCurrentPageData();    
         },
         // 下一页
         nextPage:function(){
             if (this.currentPage == this.totalPage)return ;
              this.currentPage++;
              this.setCurrentPageData();
         },
         //跳转到固定页
         toPage:function(page){
             if (page > this.totalPage || page < 1)return ;
             this.currentPage = page;
             this.setCurrentPageData();
         }
      },
    })
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      dataset: {},
      tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
          },
        },
      grid: [
    	  { x: '10%', y: '18%', width: '50%' },
      ],
      title: {
        text: '单品销量榜'
      },
      legend: {
        data: ['销量', '折扣', '销售占比']
      },
      xAxis: {
        data: [   
        	<%for(int i = 0;i < foods.size();i++){%>
        	" <%= foods.get(i).getName()%> ",
	  <%} %>]
      },
      yAxis: [{}, {}],
      series: [{
        name: '销售占比',
        type: 'pie',
        center: ['80%', '50%'],
        radius: '50%',
        data: [
        	<%Iterator<String> iter = precents.keySet().iterator();
      	  	while(iter.hasNext()){
      		   String key=iter.next();
      		   out.print(" { name: '"+key+"',value:"+precents.get(key)+"},");	
      		  }%>
        ],
        itemStyle: {
          normal: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: '销量',
        type: 'bar',
        data: [
        	<%for(int i = 0;i < foods.size();i++){%>
        	" <%= foods.get(i).getSales()%> ",
        	<%} %>
        ],
        yAxisIndex: 0
      }, {
        name: '折扣',
        type: 'line',
        data: [
        	<%for(int i = 0;i < foods.size();i++){%>
        	"  <%= foods.get(i).getDisCount()%>  ",
        	<%} %>
        ],
        yAxisIndex: 1
      }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>
</html>